(function () {
    var playBtn = document.querySelector('#section1 .play'),
        dialog = document.querySelector('.daling'),
        movie = document.querySelector('.movie'),
        clearBtn = document.querySelector('.colseBtn'),
        mask = document.querySelector('.mask');
    movieInerH = movie.innerHTML


    playBtn.onclick = function () {
        movie.innerHTML = movieInerH
        dialog.style.display = 'block'
        mask.style.display = 'block'
    }
    clearBtn.onclick = function () {
        dialog.style.display = 'none'
        mask.style.display = 'none'
        movie.innerHTML = ''
    }
})();

(function () {
    function tab(tabBtn, tcont) {
        var tabs = tabBtn.children
        var conts = tcont.children
        for (var i = 0; i < tabs.length; i++) {
            console.log('tabs', tabs[i]);
            tabs[i].index = i
            tabs[i].onclick = function () {
                for (var j = 0; j < tabs.length; j++) {
                    tabs[j].classList.remove('active')
                    conts[j].classList.remove('active')
                }
                this.classList.add('active')
                conts[this.index].classList.add('active')
                console.log('cont', conts[this.index])
            }
        }
    }
    var TabBtns = document.querySelectorAll('.tabBtn')
    var Conts = document.querySelectorAll('.tabContent')
    for (var i = 0; i < TabBtns.length; i++) {
        tab(TabBtns[i], Conts[i])
    }
})();

(function () {
    function carousel(id) {
        var perv = document.querySelector(id + ' .perv'),
            next = document.querySelector(id + ' .next'),
            warp = document.querySelector(id + ' .warp'),
            ul = document.querySelector(id + ' ul'),
            circles = document.querySelectorAll(id + ' .print span'),
            boxWidth = warp.offsetWidth,
            timer = null,
            canClick = true;

        ul.innerHTML += ul.innerHTML
        var len = ul.children.length
        var cn = 0; //当前索引
        var ch = 0; //上一次索引
        next.onclick = function () {
            if (!canClick) return
            cn++
            move()
        };

        perv.onclick = function () {
            if (!canClick) return
            if (cn == 0) {
                cn = 4;
                ul.style.transition = null
                ul.style.transform = 'translateX(' + -cn * boxWidth + 'px)'
                setTimeout(() => {
                    cn--;
                    move()
                }, 0);
                return
            }
            cn--;
            move()
        }

        for (var i = 0; i < circles.length; i++) {
            circles[i].index = i
            circles[i].onclick = function () {
                if (!canClick) return
                cn = this.index
                console.log(cn)
                move()
            }
        }

        function move() {
            canClick = false
            ul.style.transition = '.3s'
            ul.style.transform = 'translateX(' + -cn * boxWidth + 'px)'

            var hn = cn % (len / 2)
            circles[ch].className = ''
            circles[hn].className = 'acitve'
            ch = hn

        }
        // transitionend transitionend
        ul.addEventListener('transitionend', function () {
            if (cn == len / 2) {
                cn = 0
                ul.style.transition = null
                ul.style.transform = 'translateX(0)'
            }
            canClick = true
        })
        timer = setInterval(next.onclick, 1000)
        //浏览器tab页面切换、浏览器缩小的时候，浏览器为了节约资源会把运动给停掉，但是定时器依然在走。造成了不同步的问题，还有可能cn走超了等等。以下就是解决这个问题
        window.onblur = function () {
            //页面隐藏了
            clearInterval(timer);
        };
        window.onfocus = function () {
            //页面打开了
            timer = setInterval(next.onclick, 3000);
        }
    }
    carousel('#section3')
    carousel('#section5')

})();

(function () {
    var section = document.querySelector('#section4'),
        lits = document.querySelectorAll('#section4 ul li'),
        buttom = document.querySelector('#section4 .bottom')
    ln = 0;

    for (var i = 0; i < lits.length; i++) {
        lits[i].index = i
        lits[i].onclick = function () {
            lits[ln].className = ''
            this.className = 'active'
            ln = this.index
            section.style.background = 'url(images/section4_big_0' + (this.index + 1) + '.png) no-repeat center top';
            buttom.style.background = 'url(images/section4_big_0' + (this.index + 1) + '_bottom.png) no-repeat center top'
        }
    }

})();

(function () {
    var lits = document.querySelectorAll('#section7 li'),
        ln = 0;
    for (var i = 0; i < lits.length; i++) {
        lits[i].index = i
        lits[i].onclick = function () {
            lits[ln].className = ''
            this.className = 'active'
            ln = this.index
        }
    }

})();

(function () {
    var ul = document.querySelector('#section8 ul'),
        lits = ul.children,
        perv = document.querySelector('#section8 .perv'),
        next = document.querySelector('#section8 .next'),
        prints = document.querySelectorAll('#section8 span'),
        ln = 0,
        cn = 0;

    next.onclick = function () {
        cn++
        cn = cn % lits.length;

        ul.appendChild(lits[0])

        prints[ln].className = ''
        prints[cn].className = 'acitve'
        ln = cn

    }
    perv.onclick = function () {
        cn--
        if (cn < 0) {
            cn = lits.length - 1
        }
        cn = cn % lits.length;

        ul.insertBefore(lits[lits.length - 1], lits[0])

        lits[0].style.opacity = 0
        setTimeout(() => {
            lits[0].style.opacity =  ''
        }, 0);
        prints[ln].className = ''
        prints[cn].className = 'acitve'
        ln = cn

    }

})()